import { vh, vw } from "@/common/dimensions";
import LazyImage from "@/components/LazyImage";
import NavHeader from "@/components/NavHeader";
import { ResultItemType, WorkItemType, workListAtom } from "@/store/work";
import { useAtom } from "jotai";
import React, { useCallback, useEffect, useRef, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import Swiper from "react-native-swiper";
import WorkUse, { CurrentPropsType } from "./components/WorkUse";
import Toast from "react-native-toast-message";

export default function Preview(props: { id: number }) {
	let { id } = props;
	const [workList] = useAtom(workListAtom);
	const [foundWorkList, setFoundWorklist] = useState<ResultItemType[]>([]);
    const [navTitle ,setNavTitle ] = useState('')
    const [currentIndex, setCurrentIndex] = useState(0); // 新增状态保存当前索引
    const [currentProps , setCurrentProps] = useState<CurrentPropsType>({full_path:"" , api_path:"" , targetInd:0})

	useEffect(() => {
		const foundWork = workList.find((item: WorkItemType) => item.id === id)
        if(foundWork){
            const { result_json ,  json_content:{ cn : { title }} } = foundWork
            const currentResult = result_json[currentIndex]
            let option:CurrentPropsType = {
                full_path:currentResult.path,
                api_path:`/${currentResult.path.slice(currentResult.path.indexOf("uploads"))}` ,
                targetInd: currentResult.targetInd
            }
            setFoundWorklist(result_json)
            setCurrentProps(option)
            setNavTitle(title)
        }
	}, [id, workList]);

    useEffect(()=>{
        if(!!foundWorkList.length){
            const currentResult = foundWorkList[currentIndex]
            let option ={
                full_path:currentResult.path,
                api_path:`/${currentResult.path.slice(currentResult.path.indexOf("uploads"))}` ,
                targetInd: currentResult.targetInd
            }
            setCurrentProps(option) 
        }
    },[currentIndex])


	return (
		<View style={{ flex: 1 , backgroundColor:"#fff" }}>
            <View style={styles.previewContainer }>
                <NavHeader navTitle={ navTitle } />
            </View>
			<View style={{ flex: 1 , marginVertical:80 }}>
				<Swiper showsPagination={true} loop={false} index={currentIndex} onIndexChanged={(index) => setCurrentIndex(index) }>
					{foundWorkList.map((item: ResultItemType ) => (
						<LazyImage
							uri={item.path}
							key={item.path}
							style={styles.previewImage}
							defaultSource={require("@/assets/common/perch.png")}
						/>
					))}
				</Swiper>
			</View>
            <View style={{width:'100%' , height:160 , paddingHorizontal:16 * vw  }}>
                <WorkUse  currentProps={currentProps} iconSize={42} />
            </View>
            <Toast />
		</View>
	);
}
const styles = StyleSheet.create({
    previewContainer:{
        width:"100%",
        paddingTop:10 * vw ,
        paddingHorizontal:4 * vw,
    },
	previewImage: {
		width: 100 * vw,
		height: 100 * vw,
	},
});
